<%@ page import="com.onlinevideo.service.impl.FavoritesServiceImpl" %>
<%@ page import="com.onlinevideo.entity.User" %>
<%@ page import="com.onlinevideo.entity.Favorites" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script type="text/javascript" src="../static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../static/js/sweetalert.min-2.1.2.js"></script>
    <script type="text/javascript" src="../static/js/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        .gro {
            margin-bottom: 0px;
        }

        .rows {

            margin-top: 5px;
            margin-bottom: 15px;
            padding-bottom: 5px;
        }

        .abtn {
            float: left;
            color: #337ab7;
        }

        .active {
            background-color: #337ab7 !important;
            color: white;
        }

        .abtn:hover {
            background-color: #337ab7 !important;
            color: white;
        }
    </style>
    <script type="text/javascript">
        function loadMessage(thisParameter) {
            var read;
            if (thisParameter) {
                read = thisParameter.attr("data-read");
            }else {
                read=0;
            }
            $.ajax({
                url: "../message.do",
                type: "post",
                data: {
                    action: "getMessage",
                    haveRead: read
                },
                success: function (data) {
                    var parse = JSON.parse(data);

                    var message = parse.data
                    console.log(message)
                    var $messageContainer = $("#messageContainer");
                    $messageContainer.empty()
                    for (let i = 0; i < message.length; i++) {
                        var coll = " <hr>" +
                            "        <div>" +
                            "               <h5 style=\"max-height: 30px;overflow: hidden\">"
                            + message[i].context +
                            "               </h5>\n" +
                            "               <h6> "
                            + message[i].time +
                            "               </h6>\n" +
                            "            <button data-id='" + message[i].id + "' class=\"btn-primary IRead\">明白了</button>\n" +
                            "        </div>"
                        $messageContainer.append(coll);
                    }

                }
            });
        }

        $(function () {
            loadMessage();
            $(".abtn").click(function (event) {
                event.preventDefault();
                $(".abtn").removeClass("active");
                $(this).addClass("active");
                loadMessage($(this));
            });
            $("body").on("click", ".IRead", function () {
                $.ajax({
                    url: "../message.do",
                    type: "post",
                    data: {
                        action: "readMessage",
                        id: $(this).attr("data-id")
                    },
                    success: function (data) {
                        var result = JSON.parse(data);
                        if (result.code === 1) {
                            swal("提示", result.message, "success").then(function (isOk) {
                                window.location.reload()
                            });
                        } else {
                            swal("警告", result.message, "error").then(function (isOk) {
                            });
                        }
                    }
                });
            });
            $("#clearMessage").click(function () {
                $.ajax({
                    url: "../message.do",
                    type: "post",
                    data: {
                        action: "clearMessage",
                    },
                    success:function (data) {
                        var result = JSON.parse(data);
                        if (result.code === 1) {
                            swal("提示", result.message, "success").then(function (isOk) {
                                window.location.reload()
                            });
                        } else {
                            swal("警告", result.message, "error").then(function (isOk) {
                            });
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row" style="width: 100%;height: 50px;margin: 0px;">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="#" data-read="0" class="abtn active">未读信息</a></li>
            <li><a href="#" data-read="1" class="abtn">已读信息</a></li>
        </ul>
        <button style="position: relative;top: 17px;left: 10px" id="clearMessage">清除已读消息</button>
    </div>
    <div id="messageContainer">
        <%--
                <hr>
                <div>
                    <h5 style="max-height: 30px;overflow: hidden">
                        您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核您的视频"5555发发给法国"已上传，正在审核</h5>
                    <h6>2021-11-12 15:30:30</h6>
                    <button class="btn-primary">明白了</button>
                </div>--%>


    </div>
</div>
</body>
</html>
